<template>
  <div class="groupdetele">
    <!-- 仅差2人 -->
    <div class="groupdetele_top">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="grouptop_icon"
        @click="handleClick()"
      />
    </div>
    <div class="groupdetele_img"></div>
    <div class="groupdetele_shop">
      <img :src="this.list.img" alt="" class="groupdetele_shop_img" />
    </div>
    <div class="groupdetele_center">
      <div class="groupdetele_center_title">
        已有
        <span style="color: red">{{ this.numone }}</span>
        人参团，仅差<span style="color: red"> {{ this.num }} </span>人
      </div>
      <div class="groupdetele_center_residuenum">
        {{ this.num }}
      </div>
      <div class="groupdetele_center_please" @click="handlePlease()">
        邀请好友拼团
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route.query.v[0]);
    this.list = this.$route.query.v[0];
    this.num = this.$route.query.v[0].residuenum;
    this.numone = this.$route.query.v[0].joinnum;
  },
  data() {
    return {
      list: [],
      num: 0,
      numone: 0,
    };
  },
  methods: {
    handlePlease() {
      if (this.num > 0) {
        alert("邀请成功");
        this.num = this.num - 1;
        this.numone = this.numone + 1;
      }
    },
    handleClick() {
      this.$router.go(-1);
    },
  },
};
</script>

<style>
.groupdetele {
  width: 100%;
  height: 100%;
}
.groupdetele_top {
  width: 50px;
  height: 50px;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99999;
}
.grouptop_icon {
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.groupdetele_img {
  background: url("../../../images/groupdetele2.jpg") no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: fixed;
  /* z-index: 0; */
}
.groupdetele_shop {
  width: 100%;
  height: 200px;
  position: relative;
}
.groupdetele_shop_img {
  width: 110px;
  height: 100px;
  margin-left: 130px;
  margin-top: 14px;
}
.groupdetele_center {
  width: 90%;
  height: 200px;
  position: fixed;
  margin-left: 20px;
}
.groupdetele_center_title {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
}
.groupdetele_center_residuenum {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-size: 40px;
  color: red;
  font-weight: bold;
}
.groupdetele_center_please {
  width: 80%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  line-height: 50px;
  background: #fb6104;
  color: #fff;
  font-size: 18px;
  border-radius: 30px;
  margin-left: 50%;
  margin-top: 20%;
  transform: translate(-50%, -50%);
}
</style>